<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机颜色生成器</title>
    <style>
        body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;margin:0;font-family:Arial,sans-serif;transition:background-color 0.3s ease}
        .color-box{width:200px;height:200px;border-radius:10px;margin-bottom:20px;box-shadow:0 4px 8px rgba(0,0,0,0.1)}
        button{padding:10px 20px;border:none;border-radius:5px;background:#333;color:white;cursor:pointer;font-size:16px}
        button:hover{background:#555}
    </style>
</head>
<body>
    <div class="color-box" id="colorBox"></div>
    <button onclick="generateColor()">生成随机颜色</button>
    <script>
        function generateColor(){
            const color='#'+Math.floor(Math.random()*16777215).toString(16);
            document.body.style.backgroundColor=color;
            document.getElementById('colorBox').style.backgroundColor=color;
            navigator.clipboard.writeText(color);
        }
        generateColor();
    </script>
</body>
</html>